﻿<html>
<head>
  <title>Aeoid Sample App</title>
  <!--没有/是相对位置，有/是绝对位置-->
  <script type="text/javascript" src="/static/js/jquery.js"></script>
  <script type="text/javascript" src="/static/js/radiocontrol.js"></script>
  <script type="text/javascript" src="/static/js/global.js"></script>
  <script type="text/javascript" src="/static/js/define.js"></script>
  <script type="text/javascript" src="/static/js/annoation.js"></script>
  <script type="text/javascript" src="/static/js/cookie.js"></script>
  <script type="text/javascript" src="/static/js/swfobject.js"></script>
  <script type="text/javascript" src="/static/js/correcterror.js"></script>
  <script type="text/javascript" src="/static/js/jquery-ui-1.8.6.custom.min.js"></script>
  <link type="text/css" href="/static/css/jquery-ui-1.8.6.custom.css" rel="stylesheet">
</head>
<body>
	<!--
  {% if user %}
    <p>Hello, {{user.nickname}}! Do you want to <a href="{{logout_url}}">Log out?</a></p>
  {% else %}
    <p><a href="{{login_url}}">Log In</a></p>
  {% endif %}
  -->

	{% if user %}
		<div id="user">
			您好，<b>{{user.username}}</b>
			<a id="tools" href="">工具箱</a>
			<a id="faq" href="">常见问题</a>
			<a id="logouturl" href="/user/logout/">登出</a></div>
	{% else %}
		<div id="user">您没有登录 <a id="loginurl" href="/user/login/">登录</a> <a id="regurl" href="/user/reg/">注册</a></div>
	{% endif %}
	<div id="main" style="">
		<div id="radio_on_off">
			<img src="/static/pic/on.jpg" alt="开关"/>
			<!--add some other function-->
		</div>
		<div id="musicplayer">
			<audio id="audioele" src="" controls>
				<b>您的浏览器不支持HTML5</b><br/>
				<b>建议您使用谷歌Chrome浏览器</b><br/>
				<a href="http://www.google.com/chrome"><img src="/static/pic/chrome_logo.gif"/></a><br/>
			</audio>
		</div>
		<div >
			<img id="nextmusic" src="/static/pic/next.gif"/></div>
			<div id="musicinfo">
		</div>
		<div id="lyricshow">
			<!--a javascript to show the lyric corresponsed to the song-->
		</div>
		
		{% if user %}
		<div id="modify">
			<div>
				<a id="linkerror" href="">修正音频</a>
				<a id="id3error" href="">修正基本信息</a>
				<a id="lyricerror" href="">修正歌词</a>
				<a id="showmodify" href="">显示修改记录</a>
			</div>
			<div id="uploaddlg">
				<form enctype="multipart/form-data" method="post" action="/mysite/correct/musicaudio/">
					<input type="file" name="file1" />
					<input id="uploadmusicid" type="hidden" name="musicid" value="-1"/>
					<input type="submit" name="Submit" value="提交" />
				</form>
			</div>
			<div id="basicinfoerrordlg">
			</div>
			<div id="lyricerrordlg">
				<textarea id="lyricerrortext" rows="10" cols="50" value="aa"></textarea>
				<a id='clickmodifylyric'>修改</a>
			</div>
			<div id="showmodifydlg">
			</div>
		</div>
		
		<div id="annoation">
			<div id="pvalue">
				<!--change the position according to the css-->
				愉悦度：
				<img id="pleft" src="/static/pic/face/unhappy.gif"/>
				<img id="p1" height="10px" width="10px" src="/static/pic/circle.jpg"/>
				<img id="p2" height="15px" width="15px" src="/static/pic/circle.jpg"/>
				<img id="p3" height="20px" width="20px" src="/static/pic/circle.jpg"/>
				<img id="p4" height="25px" width="25px" src="/static/pic/circle.jpg"/>
				<img id="p5" height="30px" width="30px" src="/static/pic/circle.jpg"/>
				<img id="p6" height="35px" width="35px" src="/static/pic/circle.jpg"/>
				<img id="p7" height="40px" width="40px" src="/static/pic/circle.jpg"/>
				<img id="p8" height="45px" width="45px" src="/static/pic/circle.jpg"/>
				<img id="p9" height="50px" width="50px" src="/static/pic/circle.jpg"/>
				<img id="pright" src="/static/pic/face/happy.gif"/>
				<b id="pm"></b>
			</div>
			<div id="avalue">
				<!--change the position according to the css-->
				激活度：
				<img id="aleft" src="/static/pic/face/unexcited.gif"/>
				<img id="a1" height="10px" width="10px" src="/static/pic/circle.jpg"/>
				<img id="a2" height="15px" width="15px" src="/static/pic/circle.jpg"/>
				<img id="a3" height="20px" width="20px" src="/static/pic/circle.jpg"/>
				<img id="a4" height="25px" width="25px" src="/static/pic/circle.jpg"/>
				<img id="a5" height="30px" width="30px" src="/static/pic/circle.jpg"/>
				<img id="a6" height="35px" width="35px" src="/static/pic/circle.jpg"/>
				<img id="a7" height="40px" width="40px" src="/static/pic/circle.jpg"/>
				<img id="a8" height="45px" width="45px" src="/static/pic/circle.jpg"/>
				<img id="a9" height="50px" width="50px" src="/static/pic/circle.jpg"/>
				<img id="aright" src="/static/pic/face/excited.gif"/>
				<b id="am"></b>
			</div>
			<div id="dvalue">
				<!--change the position according to the css-->
				控制度：
				<img id="dleft" src="/static/pic/face/uncontrol.gif"/>
				<img id="d1" height="10px" width="10px" src="/static/pic/circle.jpg"/>
				<img id="d2" height="15px" width="15px" src="/static/pic/circle.jpg"/>
				<img id="d3" height="20px" width="20px" src="/static/pic/circle.jpg"/>
				<img id="d4" height="25px" width="25px" src="/static/pic/circle.jpg"/>
				<img id="d5" height="30px" width="30px" src="/static/pic/circle.jpg"/>
				<img id="d6" height="35px" width="35px" src="/static/pic/circle.jpg"/>
				<img id="d7" height="40px" width="40px" src="/static/pic/circle.jpg"/>
				<img id="d8" height="45px" width="45px" src="/static/pic/circle.jpg"/>
				<img id="d9" height="50px" width="50px" src="/static/pic/circle.jpg"/>
				<img id="dright" src="/static/pic/face/control.gif"/>
				<b id="dm"></b>
			</div>
		</div>
		{% endif %}
		
		<div id="musiclist">
			<!--musiclistfunction-->
		</div>
		<div id="search">
			<!--to enable search-->
		</div>
		
		
		
		<div id="showpicture">
			<!--picture here
			picture related to the song lyric-->
		</div>
	</div>

</body>
</html>
